<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script>
    // 1、基本数据类型：值被定义在栈中
    // 2、引用数据类型：值被定义在堆中，堆地址定义在栈中
    //  JS 变量引入和赋值时，完成的是栈值传递
    //  JS 环境中 通过构造函数 new 或者 字面量重新定义的方式，是会让JS的引用数据重新开辟堆空间

    // 通过模拟Vue的实现步骤
    function Vue(options){
        this._init(options)
    }
    Vue.prototype._init = function(options){
        // console.log("init",this)
        if(typeof options.data == "function"){
            this.$data = options.data();
        }else{
            this.$data = options.data;
        }
    }

    
    var vm1 = new Vue({
        data:{
            msg:"测试数据"
        }
    });
    var vm2 = new Vue({
        data:{
            msg:"测试数据"
        }
    });
    // console.log(vm1.$data);

    var options = {
        data:{
            msg:"默认数据"
        }
    }
    var vm3 = new Vue(options);
    var vm4 = new Vue(options);

    // 方法调用时机 ？？
    //    内存方法区：完整记录js方法的相关代码，程序运行，且方法被使用时，会调用并执行该方法
    function show(){
        console.log("adasd")
    }

    var opt = {
        data:function(){
            return {
                msg:"默认数据"
            }
        }
    }

    var vm5 = new Vue(opt);
    var vm6 = new Vue(opt);
</script>
<body>
    
</body>
</html>